<!-- 编辑弹窗 -->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="isUpdate ? '[' + form.username + '] 推广地域查看' : '推广地域查看'"
    :visible="visible"
    class="ele-popup-dialog"
    custom-class="ele-dialog-form"
    width="800px"
    @update:visible="updateVisible">
    <ul class="ele-regiontarget">
      <li v-for="item in tableData" :key="item.id">{{ item.name }}</li>
    </ul>
    <div slot="footer">
      <el-button
        @click="updateVisible(false)">确定
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'semReportEdit',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object,
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      // 推广地域
      tableData: [],
    };
  },
  watch: {
    data() {
      if (Object.keys(this.data).length > 0) {
        this.isUpdate = true;
        this.tableData = this.data.city;
        this.form = Object.assign({}, this.data.user);
      } else {
        this.isUpdate = false;
      }
    }
  },
  methods: {
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
}
</script>

<style scoped>
.ele-regiontarget {
  max-height: 460px;
  overflow-y: auto;
  font-size: 12px;
  margin-bottom: 20px;
  margin-top: 20px;
  margin-left: 20px;
}

li {
  float: left;
  width: 124px;
  display: block;
  height: 40px;
  list-style-type: none;
  line-height: 40px;
}

.ele-popup-dialog /deep/ .el-dialog__body {
  padding-top: 4px !important;
  padding-left: 20px !important;
  padding-right: 0;
}
</style>
